<template>
  <span class="upload__btn__wrap">
    <div v-if="type === 'input'" @click="uploadClick"><el-input placeholder="请选择文件" readonly v-model="value" :class="{ 'disabled': disabled }"></el-input></div>
    <el-button type="primary" v-else-if="!posture" @click="uploadClick" :disabled="disabled">
      <svg-icon style="margin-right: 5px;" icon-class="ic_shangchuan" />
      <slot></slot>
    </el-button>
    <div class="el-upload el-upload--picture-card" v-else @click="uploadClick">
      <svg-icon style="margin-right: 5px;" icon-class="ic_shangchuan" />
      <div class="text">
        <slot v-if="!rawFile"></slot>
        <font v-else>{{rawFile.name}}</font>
      </div>
    </div>
    <input type="file" @change="handleClick" ref="file-upload-input" :accept="accept" v-if="!disabled" :placeholder="placeholder" />
  </span>
</template>
<script>
// import {isNoSpeialCharacters} from '../../utils/validate'
export default {
  props: {
    size: Number,
    accept: String,
    beforeUpload: Function,
    onSuccess: Function,
    posture: Boolean,
    rawFile: null,
    disabled: Boolean,
    type: String,
    uploadKey: {
      type: String,
      default: 'file'
    },
    value: String,
    placeholder: String
  },
  methods: {
    uploadClick() {
      if (this.disabled) return false;
      this.$refs["file-upload-input"].click();
    },
    handleClick(e) {
      // let fileName = this.$refs["file-upload-input"].files[0].name.split('.')[0]
      // console.log(fileName)
      // if(!isNoSpeialCharacters(fileName)) {
      //   return this.$notify.error({
      //     title: "错误",
      //     message: "文件名仅能为中文、英文、数字和下划线"
      //   });
      // }
      const files = e.target.files;
      if (files.length <= 0) return false;
      const rawFile = files[0];
      if (!rawFile) return false;
      if (this.size && (rawFile.size / 1024 / 1024 > this.size)) {
        this.$refs["file-upload-input"].value = null;
        return this.$notify.error({
          title: "错误",
          message: "上传大小超过限制！"
        });
      }
      this.upload(rawFile);
    },
    upload(rawFile) {
      this.$refs["file-upload-input"].value = null;
      const formData = new FormData();
      formData.append(this.uploadKey, rawFile);
      this.onSuccess && this.onSuccess(formData, rawFile);
    },
    readerData(rawFile) {
      return new Promise(resolve => {
        const reader = new FileReader();
        reader.readAsArrayBuffer(rawFile);
        reader.onload = () => {
          resolve();
        };
      });
    }
  }
};
</script>
<style scoped lang="scss">
  @import "@/styles/mixin.scss";
.upload__btn__wrap {
  display: inline-block;
  position: relative;
  overflow: hidden;
  /deep/ .el-upload--picture-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 100%;
    .svg-icon {
      font-size: 40px;
    }
  }
  input {
    display: none;
  }
  .disabled /deep/ input {
    background-color: #f5f7fa;
    border-color: $--border-color-base;
    color: #c0c4cc;
    cursor: not-allowed;
  }
  .el-upload {
    .text {
      width: 100%;
      line-height: 20px;
      padding:20px;
    }
  }
}
</style>
